<template>
  <!-- 组件模板，.vue文件中可只出现 template 标签 -->
  <div id="app">
    <h1>App 根组件</h1>
    <h2>{{ msg }}</h2>
    <!-- 引用子组件 -->
    <foo></foo>
  </div>
</template> 

<script>
// 1. 先导入 Vue 组件，再使用
import Foo from "./components/Foo.vue";

// 导出一个默认成员对象，就是当前组件对象，Vue的data/methods等选项直接写在这里，
// template 不用写，因为上面标签就是模板对象
export default {
  data() {
    return {
      msg: "hello webpack"
    };
  },
  // 引用Foo子组件
  components: {
    Foo
  }
};
</script> 

<style scoped>
/*默认 CSS 样式会自动传递到父子组件中 scoped 指定后，CSS样式只在当前组件中有效 */
h1 {
  color: red;
}
</style>